<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推荐标签默认显示测试</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        .test-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .debug-log {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 8px;
            font-family: monospace;
            font-size: 14px;
            margin: 20px 0;
            max-height: 400px;
            overflow-y: auto;
        }
        .success { color: #48bb78; }
        .error { color: #f56565; }
        .info { color: #4299e1; }
        .warning { color: #ed8936; }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🎯 推荐标签默认显示测试</h1>

        <?php
        require_once 'config/config.php';
        require_once 'includes/database.php';
        $db = new Database();

        // 获取分类2的数据
        $category = null;
        $categories = $db->getCategories();
        foreach ($categories as $cat) {
            if ($cat['id'] == 2) {
                $category = $cat;
                break;
            }
        }

        $navigations = $db->getNavigations(2);
        $tags = $db->getTags(2);

        // 获取推荐标签信息
        $recommendTagId = 0;
        foreach ($tags as $tag) {
            if ($tag['name_cn'] === '推荐') {
                $recommendTagId = $tag['id'];
                break;
            }
        }

        // 计算推荐标签数量
        $recommendCount = 0;
        if ($recommendTagId > 0) {
            foreach ($navigations as $nav) {
                if (!empty($nav['tag_ids']) && is_array($nav['tag_ids'])) {
                    if (in_array($recommendTagId, $nav['tag_ids'])) {
                        $recommendCount++;
                    }
                }
            }
        }
        ?>

        <div class="debug-log" id="debug-log">
            <div class="info">🔍 推荐标签默认显示测试日志
        

        <!-- 测试信息 -->
        <div style="background: #f7fafc; padding: 15px; border-radius: 8px; margin: 20px 0;">
            <h3>📋 测试数据</h3>
            <p><strong>分类:</strong> <?php echo htmlspecialchars($category['name']); ?> (ID: <?php echo $category['id']; ?>)</p>
            <p><strong>推荐标签ID:</strong> <?php echo $recommendTagId; ?></p>
            <p><strong>推荐标签导航数量:</strong> <?php echo $recommendCount; ?></p>
            <p><strong>总导航数量:</strong> <?php echo count($navigations); ?></p>
            <p><strong>期望行为:</strong> 页面加载时自动显示推荐标签的<?php echo $recommendCount; ?>个导航</p>
        

        <!-- 标签容器 -->
        <div class="category-header">
            <div class="category-title">
                <div class="category-icon">
                <h2 class="category-name"><?php echo htmlspecialchars($category['name']); ?></h2>
            
            <div class="tags-container" id="category-<?php echo $category['id']; ?>">
                <!-- 推荐标签 -->
                <button class="tag-btn active"
                        data-tag-id="<?php echo $recommendTagId; ?>"
                        data-tag-filter="推荐"
                        data-category-id="<?php echo $category['id']; ?>">
                    推荐
                    <span class="tag-count"><?php echo $recommendCount; ?></span>
                </button>

                <?php
                // 过滤掉推荐标签
                $filteredTags = array_filter($tags, function($tag) {
                    return trim($tag['name_cn']) !== '推荐';
                });
                ?>
                <?php foreach ($filteredTags as $tag): ?>
                    <?php
                    // 计算该标签下的导航数量
                    $tagNavCount = 0;
                    foreach ($navigations as $nav) {
                        if (!empty($nav['tag_ids']) && is_array($nav['tag_ids'])) {
                            if (in_array($tag['id'], $nav['tag_ids'])) {
                                $tagNavCount++;
                            }
                        }
                    }
                    ?>
                    <button class="tag-btn"
                            data-tag-id="<?php echo $tag['id']; ?>"
                            data-tag-filter="<?php echo htmlspecialchars($tag['name_cn']); ?>"
                            data-category-id="<?php echo $category['id']; ?>">
                        <?php echo htmlspecialchars($tag['name_cn']); ?>
                        <span class="tag-count"><?php echo $tagNavCount; ?></span>
                    </button>
                <?php endforeach; ?>
            
        

        <!-- 导航卡片 -->
        <div class="nav-grid" id="nav-grid-<?php echo $category['id']; ?>">
            <?php foreach ($navigations as $nav): ?>
                <?php
                // 构建标签过滤器
                $tagFilters = [];
                if (!empty($nav['tag_ids']) && is_array($nav['tag_ids'])) {
                    foreach ($nav['tag_ids'] as $tagId) {
                        foreach ($tags as $tag) {
                            if ($tag['id'] == $tagId) {
                                $tagFilters[] = htmlspecialchars($tag['name_cn']);
                                break;
                            }
                        }
                    }
                }
                // 只有当导航真正包含推荐标签时才添加"推荐"标签
                if ($recommendTagId > 0 && !empty($nav['tag_ids']) && is_array($nav['tag_ids']) && in_array($recommendTagId, $nav['tag_ids'])) {
                    $tagFilters[] = '推荐';
                }
                $tagFiltersString = implode(',', array_unique($tagFilters));
                ?>
                <div class="nav-card"
                     data-tag-filters="<?php echo $tagFiltersString; ?>">
                    <a href="<?php echo htmlspecialchars($nav['url']); ?>" target="_blank">
                        
                            <h4><?php echo htmlspecialchars($nav['name']); ?></h4>
                            <p><?php echo htmlspecialchars($nav['description']); ?></p>
                        
                    </a>
                
            <?php endforeach; ?>
        

        <!-- 测试结果 -->
        <div id="test-results" style="background: #f0fff4; padding: 15px; border-radius: 8px; margin: 20px 0; display: none;">
            <h3>✅ 测试结果</h3>
            <div id="results-content">
        
    

    <script src="assets/js/php-ilovefree-migration.js"></script>
    <script>
        function log(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const logDiv = document.getElementById('debug-log');
            const className = type === 'error' ? 'error' : (type === 'success' ? 'success' : (type === 'warning' ? 'warning' : 'info'));
            logDiv.innerHTML += `<div class="${className}">[${timestamp}] ${message}`;
            logDiv.scrollTop = logDiv.scrollHeight;
            console.log(message);
        }

        function checkResults() {
            const categoryId = '<?php echo $category['id']; ?>';
            const expectedRecommendCount = <?php echo $recommendCount; ?>;

            if (window.phpPickfreeMigration) {
                const categoryData = window.phpPickfreeMigration.categories[categoryId];
                if (categoryData) {
                    // 检查当前可见的卡片数量
                    const visibleCards = categoryData.cards.filter(card =>
                        card.element.style.display !== 'none' &&
                        !card.element.classList.contains('hidden')
                    ).length;

                    // 检查选中的标签
                    const selectedTagId = window.phpPickfreeMigration.selectedTags[categoryId];
                    const recommendTagId = <?php echo $recommendTagId; ?>;

                    const resultsDiv = document.getElementById('test-results');
                    const resultsContent = document.getElementById('results-content');

                    let passed = true;
                    let results = [];

                    // 测试1: 检查推荐标签是否被选中
                    if (selectedTagId === recommendTagId) {
                        results.push('✅ 推荐标签已正确选中');
                        log('✅ 测试通过: 推荐标签已正确选中', 'success');
                    } else {
                        results.push('❌ 推荐标签未被选中');
                        log(`❌ 测试失败: 推荐标签未被选中 (当前选中: ${selectedTagId}, 期望: ${recommendTagId})`, 'error');
                        passed = false;
                    }

                    // 测试2: 检查显示的卡片数量
                    if (visibleCards === expectedRecommendCount) {
                        results.push('✅ 显示的导航数量正确');
                        log(`✅ 测试通过: 显示${visibleCards}个导航 (期望: ${expectedRecommendCount})`, 'success');
                    } else {
                        results.push(`❌ 显示的导航数量不正确 (当前: ${visibleCards}, 期望: ${expectedRecommendCount})`);
                        log(`❌ 测试失败: 显示${visibleCards}个导航 (期望: ${expectedRecommendCount})`, 'error');
                        passed = false;
                    }

                    // 测试3: 检查显示的卡片是否都包含推荐标签
                    const recommendCards = categoryData.cards.filter(card =>
                        card.tags.includes('推荐')
                    ).length;

                    if (recommendCards === expectedRecommendCount) {
                        results.push('✅ 推荐标签卡片统计正确');
                        log(`✅ 测试通过: 数据库中有${recommendCards}个推荐标签导航`, 'success');
                    } else {
                        results.push(`❌ 推荐标签卡片统计不正确 (当前: ${recommendCards}, 期望: ${expectedRecommendCount})`);
                        log(`❌ 测试失败: 数据库中有${recommendCards}个推荐标签导航 (期望: ${expectedRecommendCount})`, 'error');
                        passed = false;
                    }

                    // 显示测试结果
                    resultsContent.innerHTML = results.map(result => `<p>${result}</p>`).join('');
                    resultsDiv.style.display = 'block';

                    if (passed) {
                        log('🎉 所有测试通过！推荐标签默认显示功能正常工作', 'success');
                    } else {
                        log('⚠️ 部分测试失败，需要进一步调试', 'warning');
                    }

                } else {
                    log('❌ 分类数据未找到', 'error');
                }
            } else {
                log('❌ 迁移系统未初始化', 'error');
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            log('🎯 推荐标签默认显示测试开始', 'info');
            log(`📊 期望显示推荐标签导航: <?php echo $recommendCount; ?>个`, 'info');

            // 等待系统初始化完成
            setTimeout(() => {
                log('📊 检查系统初始化状态...', 'info');
                if (window.phpPickfreeMigration) {
                    log('✅ PHP迁移系统已初始化', 'success');

                    // 再等待一下自动过滤完成
                    setTimeout(() => {
                        log('🔍 开始检查测试结果...', 'info');
                        checkResults();
                    }, 500);
                } else {
                    log('❌ PHP迁移系统未初始化', 'error');
                }
            }, 1000);
        });
    </script>
</body>
</html>